<template>
  <el-dialog
      title="用户管理"
      :visible.sync="show"
      width="30%"
      top="10vh"
      :close-on-click-modal="closeOnClickModal"
      :append-to-body="true"
      @opened="getInfoHandle"
      @close="hiddenReset"
      :before-close="hiddenReset">
    <div class="dialog-wrapper">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="登录名" prop="account">
          <el-input
              v-model.trim="form.account"
              show-word-limit
              maxlength="255"
              placeholder="请输入登录名">
          </el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
              v-model.trim="form.name"
              show-word-limit
              maxlength="255"
              placeholder="请输入姓名">
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
              v-model.trim="form.password"
              show-password
              show-word-limit
              maxlength="255"
              placeholder="请输入密码">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="contactTel">
          <el-input
              v-model.trim="form.contactTel"
              show-word-limit
              maxlength="255"
              placeholder="请输入手机号">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
              v-model.trim="form.email"
              show-word-limit
              maxlength="255"
              placeholder="请输入邮箱">
          </el-input>
        </el-form-item>
        <el-form-item label="所属角色" prop="roleId">
          <el-select v-model="form.roleId" multiple placeholder="请选择" style="width: 100%">
            <el-option
                v-for="item in optionList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="buttonWrapper">
        <a class="cancelButton" @click="hiddenReset">取 消</a>
        <a class="confirmButton" @click="submitHandle">确 定</a>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import md5 from 'js-md5';
import {dialog} from '@/common/mixin'

export default {
  name: "add-user-dialog",
  mixins: [dialog],
  props: {
    currentId: {type: String | Number, required: true}
  },
  data() {
    return {
      form: {
        account: null,
        name: null,
        password: null,
        contactTel: null,
        roleId: null,
        email: null,
      },
      optionList: [
        {
          id: 1,
          name: "系统管理员"
        }
      ],
    }
  },
  computed: {
    rules() {
      return {
        account: [{
          required: true,
          message: '账户名称不能为空',
          trigger: ['blur']
        }],
        password: [{
          required: this.currentId ? false : true,
          message: '密码不能为空',
          trigger: ['blur']
        }],
        name: [{
          required: true,
          message: '姓名不能为空',
          trigger: ['blur']
        }],
        email: [{
          validator: (rule, value, callback) => {
            if (!this.form.email || this.$reg.regEmail(value)) {
              callback()
            } else {
              callback(new Error('邮箱格式不正确'))
            }
          }, trigger: ['blur'],
        }],
        type: [{
          required: true,
          message: '用户类型不能为空',
          trigger: ['blur']
        }],
      }
    }
  },
  methods: {
    // 初始化获取用户信息
    async getInfoHandle() {
      this.$refs.form.clearValidate()
      await this.getRoleList();
      if (this.currentId) {
        let data = await this.$get(this.$api.systemSettings.userManage.getInfoById, {
          id: this.currentId
        });
        this.$utils.leftCopy(this.form, {...data})
        this.form.password = null;
        if (this.form.roleId) {
          this.form.roleId = this.form.roleId.split(",");
          this.form.roleId = this.form.roleId.map(item => parseInt(item));
        }
      }
    },
    // 初始化获取角色列表
    async getRoleList() {
      let data = await this.$post(this.$api.systemSettings.roleManage.list, JSON.stringify({
        currentPage: 1,
        pageSize: 100000,
      }));
      if (data.list.length > 0) {
        this.optionList = data.list;
      }
    },

    getParams() {
      let param = {...this.form}
      if (this.form.password) {
        param.password = md5(this.form.password)
      }
      return param;
    },
    async submitHandle() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let param = this.getParams();
          if (this.currentId) {
            await this.$post(this.$api.systemSettings.userManage.update, JSON.stringify({
              ...param,
              userId:this.currentId,
              roleId: this.form.roleId ? this.form.roleId.join(',') : ''
            }))
          } else {
            await this.$post(this.$api.systemSettings.userManage.insert, JSON.stringify({
              ...param,
              roleId: this.form.roleId ? this.form.roleId.join(',') : ''
            }))
          }
          await this.$message({type: 'success', message: '保存成功'})
          await this.hiddenReset();
          this.$emit('success');
        }
      })
    },
  },
}
</script>

<style scoped>
.dialog-wrapper {
  padding: 20px 40px;
}

.el-form-item {
  margin-bottom: 22px !important;
}

.uploadButton {
  display: inline-block;
  width: 100%;
  height: 1.95rem;
  background: linear-gradient(180deg, #EBF4FF 0%, #E2EEFF 62%, #D3E2FF 100%);
  box-shadow: 0 0.05rem 0.05rem 0 #B8D3FF;
  border-radius: 0.15rem;
  border: 1px solid #AEC7FC;
  box-sizing: border-box;
  color: #3C81F8;
}
</style>